(function () {
    let trueshow=document.querySelector(".trueshow");
    let BigArea=document.querySelector(".bigArea");
    let BigImg=document.querySelector(".bigArea img");
    let oLis=document.querySelectorAll(".glassul>li")
//鼠标移动
    trueshow.addEventListener("mousemove",function(e){
        let x=e.pageX;
        let l=trueshow.offsetLeft;
        let moveLeft=x-l-BigArea.offsetWidth/2;
        if(moveLeft<=0) moveLeft=0;
        let maxLeft=trueshow.offsetWidth-BigArea.offsetWidth;
        if(moveLeft>=maxLeft) moveLeft=maxLeft;
        BigArea.style.left=moveLeft+'px';
        let bigImgLeft=(moveLeft+BigArea.offsetWidth/2)/trueshow.offsetWidth*BigImg.offsetWidth-BigArea.offsetWidth/2;
        BigImg.style.left=-bigImgLeft+'px';

        let y=e.pageY;
        let h=trueshow.offsetTop;
        let moveTop=y-h-BigArea.offsetHeight/2;
        // console.log(moveTop);
        if(moveTop<=0) moveTop=0;
        let maxTop=trueshow.offsetHeight-BigArea.offsetHeight;
        if(moveTop>=maxTop) moveTop=maxTop;
        BigArea.style.top=moveTop+'px';
        let bigImgTop=(moveTop+BigArea.offsetHeight/2)/trueshow.offsetHeight*BigImg.offsetHeight-BigArea.offsetHeight/2;
        BigImg.style.top=-bigImgTop+'px';  
    })
    //鼠标移入
    trueshow.addEventListener("mouseover",function(){
        
        BigArea.style.display="block";
        
    })
    //鼠标移出
    trueshow.addEventListener("mouseout",function(){
        
        BigArea.style.display="none";
    })
    console.log(oLis);
  //绑定点击事件

    Array.from(oLis).forEach((el,index)=>{
        el.onclick=function(){
            console.log(11);
            el.parentNode.parentNode.children[1].children[0].children[0].src=`./images/glass${index+1}.jpg`
            BigImg.src=`./images/glass${index+1}.jpg`
        }
    })
  
})()